<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div>
      <h1>文档碎片优化节点添加</h1>
      <div>
        <h2>节点添加优化</h2>
        <p>节点的添加操作必然会有回流和重绘</p>
      </div>
    </div>
    <script>
      for (var i = 0; i < 10; i++) {
        var oP = document.createElement("p");
        oP.innerHTML = i;
        document.body.appendChild(oP);
      }

      //优化
      //创建一个容器
      const fragEle = document.createDocumentFragment();
      for (var i = 0; i < 10; i++) {
        var oP = document.createElement("p");
        oP.innerHTML = i;
        fragEle.appendChild(oP);
      }
      document.body.appendChild(fragEle);
    </script>
  </body>
</html>
